import { ArrowRightOutlined } from "@ant-design/icons"
import { StoryObj } from "@storybook/react"
import { Button, Card, Divider, Flex, Form, Typography } from "antd"
import { useState } from "react"

import { NormalSelect } from "@/components/common"

const Template = (args: { labelId: string; name: string; options: { label: string; value: string | number }[] }) => {
	const { Title, Paragraph, Text } = Typography
	const [bodyStr, setBodyStr] = useState("")
	const submit = (body: any) => {
		setBodyStr(JSON.stringify(body))
	}
	return (
		<Form onFinish={submit}>
			<Typography>
				<Title level={2}>多选框</Title>
				<Paragraph>
					可复用表单复选框，如缺省示例&quot;<Text italic>场馆名称</Text>&quot;, 必须在business组件中封装后导出使用,
					示例封装关键代码如下：
					<Divider />
					<Flex gap={8} align="center">
						<Flex vertical>
							<Text code>
								{`const options = [
							{
								"label": "DX德州",\n
								"value": "DZ"\n
							},
							{
									"label": "PM真人",\n
									"value": "zr"\n
							},...]`}
							</Text>
							<Text
								code
							>{`<NormalSelect mode="tags" maxTagCount={1} options={options} labelId="${args.labelId}" name="${args.name}" />`}</Text>
						</Flex>
						<ArrowRightOutlined />
						<Card>
							<NormalSelect mode="tags" maxTagCount={1} {...args} />
						</Card>
					</Flex>
				</Paragraph>
				<Paragraph>
					<Button htmlType="submit" type="primary">
						提交
					</Button>
					<div>提交的body参数：{bodyStr}</div>
				</Paragraph>
			</Typography>
			{/* <Flex vertical gap={8}>
				<Flex gap={16} align="center">
					<span style={{ fontWeight: "bold" }}>代码示例:</span>
					<span></span>
				</Flex>
			</Flex> */}
		</Form>
	)
}

export default {
	title: "多选框",
	component: Template
}

type Story = StoryObj<typeof Template>

export const VenueSelect: Story = {
	args: {
		labelId: "label.venueName",
		name: "venueNames",
		options: [
			{
				label: "DX德州",
				value: "DZ"
			},
			{
				label: "PM真人",
				value: "zr"
			},
			{
				label: "PM体育",
				value: "ty"
			},
			{
				label: "PM电竞",
				value: "dj"
			},
			{
				label: "博雅棋牌",
				value: "byqp"
			},
			{
				label: "PM彩票",
				value: "cp"
			},
			{
				label: "PM电子",
				value: "dy"
			}
		]
	}
}
